<template>
  <div class="mobile-edit-container">
    <!-- 导航栏 -->
    <van-nav-bar title="古建筑彩绘文物调查管理系统" fixed @click-right="goToUser">
      <!-- 左侧插槽：显示“首页” -->
      <template #left>
        <!-- <span class="nav-text" @click="goHome">首页</span> -->
        <van-icon name="wap-home" class="nav-text" @click="goHome" size="18" />
      </template>

      <!-- 右侧用户图标 -->
      <template #right>
        <van-icon name="user" size="18" />
      </template>
    </van-nav-bar>
    <!-- 面包屑导航 -->
    <div class="breadcrumb">
      <span class="breadcrumb-item" @click="goHome">首页</span>
      <span class="breadcrumb-separator">></span>
      <span class="breadcrumb-item" @click="goToCategory">文物主体管理</span>
      <span class="breadcrumb-separator">></span>
      <span class="breadcrumb-item">{{ currentCategory.name }}</span>
      <span class="breadcrumb-separator">></span>
      <span class="breadcrumb-item">编辑</span>
    </div>

    <!-- 加载状态 -->
    <div v-if="loading" class="state-placeholder">
      <van-loading type="spinner" size="24px">加载中...</van-loading>
    </div>

    <!-- 错误状态 -->
    <div v-else-if="error" class="state-placeholder">
      <van-empty description="加载失败，请重试">
        <template #bottom>
          <van-button type="primary" size="small" @click="fetchCategoryData">重试</van-button>
        </template>
      </van-empty>
    </div>

    <!-- 表单 -->
    <van-form v-else ref="formRef" class="edit-form" @submit="handleSubmit">
      <!-- 名称 -->
      <van-field v-model="formData.category.name" name="name" label="名称" :rules="[{ required: true, message: '请输入名称' }]"
        clearable placeholder="请输入文物主体名称">
        <template #label>
          <span class="field-label"><span class="required-star">*</span> 名称</span>
        </template>
      </van-field>

      <!-- 地理位置 -->
      <van-field v-model="formData.category.address" name="address" label="地理位置"
        :rules="[{ required: true, message: '请输入地理位置' }]" type="textarea" autosize clearable
        placeholder="请输入详细地理位置或存放地址">
        <template #label>
          <span class="field-label"><span class="required-star">*</span> 地理位置</span>
        </template>
      </van-field>

      <!-- 建筑年代 -->
      <van-field v-model="formData.category.construction_age" name="construction_age" label="建筑年代"
        :rules="[{ required: true, message: '请输入建筑年代' }]" clearable placeholder="例如：建于清康熙中期（公元1700年）">
        <template #label>
          <span class="field-label"><span class="required-star">*</span> 建筑年代</span>
        </template>
      </van-field>

      <!-- 建筑类型 -->
      <van-field name="construction_type_selected" label="建筑类型" :rules="[{ required: true, message: '请至少选择一种建筑类型' }]">
        <template #label>
          <span class="field-label"><span class="required-star">*</span> 建筑类型</span>
        </template>
        <template #input>
          <van-checkbox-group v-model="formData.category.construction_type_selected" direction="horizontal">
            <van-checkbox name="市井戏台" shape="square">市井戏台</van-checkbox>
            <van-checkbox name="庙宇戏台" shape="square">庙宇戏台</van-checkbox>
            <van-checkbox name="宗祠戏台" shape="square">宗祠戏台</van-checkbox>
            <van-checkbox name="其他" shape="square">其他</van-checkbox>
          </van-checkbox-group>
        </template>
      </van-field>

      <!-- 其他建筑类型 -->
      <van-field v-if="formData.category.construction_type_selected.includes('其他')"
        v-model="formData.category.construction_type_other" name="construction_type_other" label="其他类型"
        :rules="[{ required: true, message: '请填写其他建筑类型' }]" clearable placeholder="请输入其他建筑类型">
        <template #label>
          <span class="field-label"><span class="required-star">*</span> 其他类型</span>
        </template>
      </van-field>

      <!-- 布局方位 -->
      <van-field v-model="formData.category.layout_orientation" name="layout_orientation" label="布局方位"
        :rules="[{ required: true, message: '请输入布局方位' }]" clearable placeholder="例如：坐北朝南、依山而建等">
        <template #label>
          <span class="field-label"><span class="required-star">*</span> 布局方位</span>
        </template>
      </van-field>

      <!-- 保护级别 -->
      <van-field name="protection_level_main" label="保护级别" :rules="[{ required: true, message: '请至少选择一种保护级别' }]">
        <template #label>
          <span class="field-label"><span class="required-star">*</span> 保护级别</span>
        </template>
        <template #input>
          <van-radio-group v-model="formData.category.protection_level_main" direction="vertical">
            <van-radio name="国宝单位">国宝单位</van-radio>
            <van-radio name="省级">省级</van-radio>
            <van-radio name="市县级">市县级</van-radio>
            <van-radio name="未定级">未定级</van-radio>
          </van-radio-group>
        </template>
      </van-field>

      <!-- 保护级别补充信息 -->
      <van-field v-model="formData.category.protection_level_extra" name="protection_level_extra" label="级别补充信息"
        placeholder="如：批次：第1批全国重点文物保护单位" type="textarea" autosize />

      <!-- 描述 -->
      <van-field v-model="formData.category.description" name="description" label="描述"
        :rules="[{ required: true, message: '请输入描述' }]" type="textarea" autosize placeholder="请输入该文物主体的历史背景、文化价值等描述">
        <template #label>
          <span class="field-label"><span class="required-star">*</span> 描述</span>
        </template>
      </van-field>

      <!-- 主图上传 -->
      <van-field name="image" label="主体图片">
        <template #label>
          <span class="field-label"><span class="required-star">*</span> 主体图片</span>
        </template>
        <template #input>
          <div class="image-upload-wrapper">
            <!-- 当前图片预览 -->
            <div v-if="currentCategory.image_base64 && !imageChanged.value" class="current-image-preview">
              <van-image :src="currentCategory.image_base64" fit="cover" width="100" height="100" radius="6"
                @click="previewImage(currentCategory.image_base64)" />
            </div>

            <!-- 上传控件 -->
            <van-uploader v-model:="formData.category.image" :max-count="1" upload-text="更换图片" preview-size="100"
              :before-read="beforeRead" @change="handleImageChange" />
          </div>
        </template>
      </van-field>

      <!-- 图片预览弹窗 -->
      <van-image-preview v-model:show="dialogVisible" :images="[dialogImageUrl]" />

      <!-- 提交按钮 -->
      <div class="form-actions">
        <van-button block type="primary" native-type="submit" :loading="submitLoading">
          保存修改
        </van-button>
        <van-button block @click="handleCancel" style="margin-top: 10px;">
          取消
        </van-button>
      </div>
    </van-form>
    <van-button type="success" @click="showSuccess">成功按钮</van-button>
  </div>

</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useCategoryEdit } from '@/components/composables/useCategoryEdit'
import { showToast ,showSuccessToast,showNotify,Toast} from 'vant'
import { showDialog } from 'vant';

const showSuccess = () => {
  showSuccessToast('提示');
};
// 使用 PC 编辑页的 composable（支持移动端）
const {
  formData,
  loading,
  error,
  submitLoading,
  formRef,
  dialogImageUrl,
  dialogVisible,
  currentCategory,
  imageChanged,
  goHome,
  goToCategory,
  goToUser,
  handlePictureCardPreview,
  handleRemove,
  handleImageChange,
  fetchCategoryData,
  handleSubmit,
  handleCancel,
  onClickLeft,
} = useCategoryEdit()

</script>

<style scoped>
.mobile-edit-container {
  padding-top: 46px;
  min-height: 100vh;
  background-color: #2657a1;
}

.edit-form {
  padding: 12px 16px;
}

.state-placeholder {
  padding: 80px 0;
  text-align: center;
}

.form-actions {
  margin-top: 30px;
}

/* 红色星号样式 */
.field-label {
  font-weight: normal;
  color: #333;
}

.required-star {
  color: #ee0a24;
  margin-right: 4px;
}

/* 图片上传区域布局 */
.image-upload-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.current-image-preview {
  flex-shrink: 0;
}

/* 面包屑样式 */
.breadcrumb {
  padding: 8px 16px;
  background-color: #f7f8fa;
  font-size: 14px;
  color: #666;
  display: flex;
  align-items: center;
  /* 确保不被 fixed 的 nav-bar 遮挡 */
  margin-top: 0px;
  /* van-nav-bar 的默认高度 */
}

.breadcrumb-item {
  color: #1989fa;
  /* 可点击项用蓝色 */
}

.breadcrumb-item:last-child {
  color: #333;
  font-weight: 500;
}

.breadcrumb-separator {
  margin: 0 1px;
  color: #999;
}
/* vant4的 Toast 和 Popup 样式冲突,会导致 Toast 变成白底 */
.van-popup.van-toast{
    background: var(--van-toast-background) !important;
    box-sizing: content-box !important;
    /* 下面3条css,影响不大 */
    transition: all var(--van-duration-fast) !important;
    width: var(--van-toast-default-width) !important;
    max-width: var(--van-toast-max-width) !important;
}
.van-popup.van-toast .van-toast__icon{
    font-size: var(--van-toast-icon-size) !important;
}

</style>
